<template>
  <div id="wrapper">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="接口名称" size="mini">
        <el-input style="width: 12em" v-model="listQuery.apiName" placeholder="接口名称"></el-input>
      </el-form-item>
      <el-form-item label="接口地址" size="mini">
        <el-input style="width: 12em" v-model="listQuery.apiUrl" placeholder="接口地址"></el-input>
      </el-form-item>
      <el-form-item label="接口分类" size="mini">
        <el-select v-model="listQuery.apiClassify" placeholder="接口分类" style="width: 12em">
          <el-option v-for="item in apiClassifyList" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="info" @click="resetList">重置</el-button>
        <el-button type="primary" @click="toAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
        v-loading="tableLoading"
        :data="tableData"
        row-key="id"
        style="width: 100%"
        :expand-row-keys="expandRowKeys">
      <el-table-column
          label="接口名称">
        <template slot-scope="scope">
          <span></span>
          <el-link :underline="false" @click="rowClick(scope.row)">{{scope.row.apiName}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
          width="60px"
          label="接口类型"
          prop="apiTypeName">
      </el-table-column>
      <el-table-column
          label="接口地址"
          prop="apiUrl">
      </el-table-column>
      <el-table-column
          width="120px"
          label="创建用户"
          prop="createUserName">
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="createTime">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-dropdown @command="(command) => handleCommand(command, scope.$index, scope.row)" style="margin-left: 10px" trigger="click">
            <span class="el-dropdown-link">
              菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="1">详情</el-dropdown-item>
              <el-dropdown-item :command="2">编辑</el-dropdown-item>
              <el-dropdown-item :command="3">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
name: "OpenApiManage",
  data: function() {
    return {
      tableLoading: false,
      listQuery: {
        apiName: null,
        type: 0,
        apiClassify: null,
        apiUrl: null,
        pageNo: 0,
        pageSize: 10
      },
      apiClassifyList: [
          "公安", "网信"
      ],
      tableData: [],
      expandRowKeys: [],
      total: 0
    }
  },
  methods: {
    /**
     * 获取列表
     */
    async getList() {
      let res = await this.$http.post('/api/apiManage/list', this.listQuery)
      if(res.code == 0){
        this.tableData = res.data.data
        this.total = res.data.total
      }
    },
    /**
     * 重置列表
     */
    resetList() {
      this.listQuery.apiUrl = null
      this.listQuery.apiName = null
      this.listQuery.apiClassify = null
      this.getList()
    },
    /**
     * 跳转新增页面
     */
    toAdd() {
      this.$router.push("/openApi/manage/add")
    },
    /**
     * 通过id删除
     */
    async deleteById(id) {
      let res = await this.$http.delete('/api/apiManage/deleteById?id=' + id)
      if(res.code == 0){
        this.$message({
          message: res.message,
          type: 'success'
        })
        await this.getList()
      }
    },
    async handleCommand(command, index, row) {
      if (command == 1) {
        // 详情
        this.$router.push("/openApi/manage/detail?id=" + row.id)
      } else if (command == 2) {
        // 编辑
        this.$router.push("/openApi/manage/edit?id=" + row.id)
      } else if (command == 3) {
        // 删除
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteById(row.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });
        });
      }
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    rowClick(row) {
      this.$router.push("/openApi/manage/detail?id=" + row.id)
    }
  },
  activated: function(){
    this.getList()
  }
}
</script>

<style>
.block {
  margin-top: 10px;
}
</style>
